<template>
	<view class="home-wrap">
		<view class="home-contnet">
			<view class="status-bar home-contnet-status-bar"></view>
			<view class="home-contnet-nav" :style="{height: navHeight}">
				<image class="home-contnet-nav-addr-icon" src="../../static/imgs/local.png"></image>
				<view class="home-contnet-nav-addr-text" @click="handleGoSelectAddr">{{ currentCity.name }}</view>
				<view class="home-contnet-nav-search">
					<image class="home-contnet-nav-search-icon" src="../../static/imgs/search.png"></image>
					<text>搜索岗位</text>
				</view>
			</view>
			<view class="home-contnet-body">
				<scroll-view class="home-contnet-body-left" scroll-y="true">
					<view v-for="item in areaList" :key="item.id" class="hcb-city-item" @click="handleChangeCity(item)" :style="{ backgroundColor: activeArea == item.id ? '#FAFAFA' : '#f1f1f1' }">
						<view :style="{ backgroundColor: activeArea == item.id ? '#4FC48F' : '#f1f1f1' }"></view>
						<text>{{ item.name }}</text>
					</view>	
				</scroll-view>
				<scroll-view class="home-contnet-body-right" @scrolltolower="handleLoadMore" scroll-y="true">
					<view v-if="showAdv" class="home-banner-adv">
						<view>预留广告位</view>
					</view>	
					<view class="hcb-title">
						<text>最新岗位</text>
					</view>
					<view v-for="item in workList" :key="item.id" class="hcb-card">
						<view @click="goDetail(item)" class="hcb-card-title tcr-auto-line">{{ item.title }}</view>
						<view class="hcb-card-price">
							<text class="hcb-card-price-num">{{ item.workPrice }}</text>
							<text class="hcb-card-price-unit">{{ item.priceUnitName }}</text>
						</view>
						<view class="hcb-card-base">
							<text class="hcb-card-base-count">招{{ item.needCount }}人，</text>
							<text class="hcb-card-base-area">{{ item.workAge }}周岁</text>
						</view>
						<view class="hcb-card-tags">
							<view v-for="(item, index) in item.workTags" :key="index" class="hcb-card-tags-item">{{ item }}</view>
						</view>
						<view class="hcb-card-bottom"></view>
						<view @click="goEnroll(item)" class="hcb-card-button">立即报名</view>
					</view>
					<LoadMore v-if="total > 0" :more-flag="moreFlag" />
				</scroll-view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<uni-popup ref="videoAdvDialog" type="dialog">
			<view class="source-info-wrap">
				<image @click="handleCancelSearch" class="tcr-model-close" src="../../static/imgs/close.png"></image>
				<view class="source-info-code">
					<text class="tcr-tint-title">机器码：</text>
					<text>{{ sourceInfo.sourceCode }}</text>
				</view>
				<view class="source-info-name">
					<text class="tcr-tint-title">软件名称：</text>
					<text class="source-fee tcr-ellipsis">{{ sourceInfo.sourceName }}</text>
				</view>
				<view class="source-info-fee">
					<text class="tcr-tint-title">消耗积分：</text>
					<text class="source-fee">{{ sourceInfo.sourceAuthFee }}</text>
				</view>
				<view class="source-info-btns">
					<button v-if="sourceInfo.sourceAuthFee > activityPoints" @click="handleGoActivity" class="mini-btn" type="primary" size="mini">获取积分</button>
					<button v-else @click="handleSubmit" class="mini-btn" type="primary" size="mini">确认</button>
					<button @click="handleCancelSearch" class="mini-btn" type="default" size="mini">取消</button>
				</view>
			</view>
		</uni-popup>
		<TcrLogin ref="tcrLogin"></TcrLogin>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				codeText: '',
				showAdv: false,
				sourceCode: '',
				sourceInfo: {},
				activityPoints: 0,
				navHeight: '80rpx',
				cityList: [],
				areaList: [],
				activeArea: 0,
				provinceList: [],
				currentCity: {},
				total: 0,
				workList: [],
				moreFlag: 0,
				queryParam: {
					pageNum: 1,
					pageSize: 5,
					workProvince: '',
					workCity: '',
					workArea: '',
				}
			}
		},
		onLoad() {
			this.handleNavHeight();
			this.initData();
		},
		onShow() {
			const mobileConfig = uni.getStorageSync("mobileConfig");
			if (this.currentCity.id != mobileConfig.indexDefaultCity) {
				this.queryParam.workArea = '';
				this.initData();
			}
		},
		methods: {
			/** 初始化数据 */
			initData() {
				const provinceList = uni.getStorageSync("provinceList");
				this.provinceList = provinceList;
				// 判断默认省份
				const mobileConfig = uni.getStorageSync("mobileConfig");
				if (mobileConfig && mobileConfig.indexDefaultProvince && mobileConfig.indexDefaultCity) {
					if (provinceList && provinceList.length > 0) {
						// 请求市数据
						this.getCityList(mobileConfig.indexDefaultProvince, mobileConfig.indexDefaultCity);
						// 请求区数据
						this.getAreaList(mobileConfig.indexDefaultCity)
						// 初始化请求数据
						this.queryParam.pageNum = 1;
						this.queryParam.workProvince = mobileConfig.indexDefaultProvince;
						this.queryParam.workCity = mobileConfig.indexDefaultCity;
						this.workList = [];
						this.queryWorkList();
					} else {
						this.loadProvinceList();
					}
				}
			},
			/** 获取市信息 */
			getCityList(provinceId, cityId) {
				//发起网络请求
				this.$http.get({
					url: this.$apis.getAddressList,
					data: {
						parentId: provinceId,
						id: cityId
					},
					noAuth: true,
				}).then(res => {
					if (res.code === 200) {
						this.cityList = res.data;
						// 初始化定位显示
						const city = this.cityList.filter(x => x.id == cityId);
						this.currentCity = city[0];
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			/** 获取区县信息 */
			getAreaList(code) {
				//发起网络请求
				this.$http.get({
					url: this.$apis.getAddressList,
					data: {
						parentId: code
					},
					noAuth: true,
				}).then(res => {
					if (res.code === 200) {
						const arr = res.data.filter(x => x.name != '市辖区')
						this.areaList = [{id: 0, name: '全部'}, ...arr];
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			/** 查询职位列表 */
			queryWorkList() {
				if (this.moreFlag == 1) {
					return;
				}
				this.queryParam.pageSize = 5;
				this.moreFlag = 1;
				this.$http.get({
					url: this.$apis.getWorkList,
					data: this.queryParam,
					noAuth: true,
				}).then(res => {
					if (res.code === 200) {
						res.rows.forEach(item => {
							if (item.workTags) {
								item.workTags = item.workTags.split(',');
							}
						});
						this.workList = [...this.workList, ...res.rows];
						this.total = res.total;
					}
					this.resetFlag();
				}).catch(err => {
					console.log('调用接口失败：', err);
					this.resetFlag()
				});
			},
			resetFlag() {
				if (this.total > this.workList.length) {
					this.moreFlag = 0;
				} else {
					this.moreFlag = 2;
				}
			},
			handleSearch() {
				const userInfo = uni.getStorageSync('userInfo');
				const token = uni.getStorageSync('token');
				if (token && userInfo.loginStatus) {
					// 说明登陆了
					this.loadUserPoints();
					this.openSourceInfo();
				} else {
					// 说明未登录
					this.$refs.tcrLogin.showLoginDialog();
				}
			},
			openSourceInfo() {
				if (!this.sourceCode) {
					uni.showToast({
						title: '机器码不能为空',
						icon: 'none',
						duration: 1500
					});
					return;
				}
				
				this.$http.get({
					url: this.$apis.getSourceDetail + '/' + this.sourceCode
				}).then(res => {
					if (res.code === 200) {
						this.sourceInfo = res.data;
						const userInfo = uni.getStorageSync('userInfo');
						this.activityPoints = userInfo.activePoints;
						this.$refs.videoAdvDialog.open();
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				})
			},
			handleCancelSearch() {
				// 取消查询
				this.sourceInfo = null;
				this.$refs.videoAdvDialog.close();
			},
			handleSubmit() {
				// 确认获取
				this.$http.post({
					url: this.$apis.getAuthCode,
					data: {
						sourceCode: this.sourceInfo.sourceCode
					},
				}).then(res => {
					if (res.code === 200) {
						this.codeText = res.data.secret;
						this.handleCancelSearch();
						uni.showToast({
							title: '获取成功',
							icon: 'none',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			loadUserPoints() {
				// 加载会员积分
				this.$http.get({
					url: this.$apis.userInfoUrl
				}).then(res => {
					console.log(res, '调用接口成功');
					res.data.loginStatus = true;
					uni.setStorageSync('userInfo', res.data);
				}).catch(err => {
					console.log('调用接口失败：', err);
				})
			},
			handleGoActivity() {
				// 跳转获取积分页面
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			},
			onLoadBannerAdv(e) {
				// 加载广告事件
				console.log(e, 'load banner adv');
			},
			onCloseBannerAdv(e) {
				// 关闭广告事件
				console.log(e, 'close banner adv');
			},
			onErrorBannerAdv(e) {
				// 广告异常事件
				console.log(e, 'error banner adv');
			},
			copyText(data) {
				if (data) {
					uni.setClipboardData({
						data: data,
						success: function() {
							console.log('success');
						}
					});
				}
			},
			/** 处理状态栏高度 */ 
			handleNavHeight() {
				const sysInfo = uni.getSystemInfoSync();
				const bundingInfo = uni.getMenuButtonBoundingClientRect();
				// 计算状态栏高度
				let navHeight = (bundingInfo.top - sysInfo.statusBarHeight) * 2 + bundingInfo.height;
				this.navHeight = navHeight + 'px';
			},
			/** 点击城市触发 */
			handleChangeCity(row) {
				if (this.moreFlag == 1) {
					uni.showToast({
						title: '数据请求中请耐心等待',
						icon: 'none'
					})
					return;
				}
				this.activeArea = row.id;
				if (row.id > 0) {
					this.queryParam.workArea = row.id;
				} else {
					this.queryParam.workArea = '';
				}
				this.queryParam.pageNum = 1;
				this.workList = [];
				this.queryWorkList();
			},
			loadProvinceList() {
				//发起网络请求
				this.$http.get({
					url: this.$apis.getProvinceList,
					data: {},
					noAuth: true,
				}).then(res => {
					if (res.code === 200) {
						uni.setStorageSync('provinceList', res.data);
						this.initData();
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			},
			handleGoSelectAddr() {
				uni.navigateTo({
					url: '/pages/address/address',
				});
			},
			handleLoadMore() {
				if (this.total > this.workList.length) {
					this.queryParam.pageNum = this.queryParam.pageNum + 1;
					this.queryWorkList();
				} 
			},
			/** 跳转详情页 */
			goDetail(row) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + row.id,
				});
			},
			/** 跳转报名页 */
			goEnroll(row) {
				uni.navigateTo({
					url: '/pages/enroll/enroll?id=' + row.id
				});
			}
		}
	}
</script>

<style lang="scss">
	.home-wrap {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
		
		.home-contnet {
			height: 100vh;
			background-color: #d50003;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			
			&-status-bar {
				background-color: #4FC48F;
				width: 100%;
			}
			
			&-nav {
				background-color: #4FC48F;
				height: 100rpx;
				display: flex;
				align-items: center;
				
				&-addr-icon {
					margin-left: 20rpx;
					width: 36rpx;
					height: 36rpx;
				}
				
				&-addr-text {
					margin-left: 10rpx;
					color: #ffffff;
					font-size: 32rpx;
				}
				
				&-search {
					margin-left: 30rpx;
					width: 46vw;
					height: 60rpx;
					background-color: #FAFAFA;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					
					&-icon {
						margin-left: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					
					> text {
						font-size: 26rpx;
						margin-left: 10rpx;
						color: #999999;
					}
				}
			}
			
			&-body {
				flex: 1;
				height: 0;
				background-color: #FAFAFA;
				display: flex;
				
				&-left {
					height: 100%;
					width: 200rpx;
					background-color: #f1f1f1;
					border-radius: 20rpx 0 0 0;
					
					.hcb-city-item {
						height: 100rpx;
						display: flex;
						align-items: center;
						
						> view {
							height: 30rpx;
							width: 10rpx;
							background-color: #4FC48F;
							margin-left: 4rpx;
							border-radius: 15rpx;
						}
						
						> text {
							margin-left: 20rpx;
							font-size: 28rpx;
						}
					}
					
					.hcb-city-item:first-child {
						border-radius: 20rpx 0 0 0;
					}
				}
				
				&-right {
					height: 100%;
					width: 0;
					flex: 1;
					border-radius: 0 20rpx 0 0;
					
					.home-banner-adv {
						padding: 20rpx;
						width: 100%;
						height: 200rpx;
						box-sizing: border-box;
						
						> view {
							height: 100%;
							width: 100%;
							background-color: #8bff8b;
						}
					}
					
					.hcb-title {
						padding: 20rpx;
						
						> text {
							font-size: 32rpx;
							color: #333333;
							font-weight: 600;
						}
					}
					
					.hcb-card {
						padding: 20rpx;
						padding-right: 40rpx;
						background: linear-gradient(to bottom, #fafafa, #f2fff8);
						position: relative;
						
						&-title {
							font-size: 30rpx;
						}
						
						&-price {
							color: #15B371;
							margin-top: 10rpx;
							
							&-num {
								font-size: 38rpx;
								font-weight: 600;
							}
							
							&-unit {
								font-size: 28rpx;
								margin-left: 4rpx;
							}
						}
						
						&-base {
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
						
						&-tags {
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							
							&-item {
								background-color: #4dbf88;
								color: #ffffff;
								margin-right: 10rpx;
								font-size: 24rpx;
								padding: 4rpx 6rpx;
							}
						}
						
						&-bottom {
							height: 20rpx;
						}
						
						&-button {
							position: absolute;
							right: 40rpx;
							bottom: 60rpx;
							width: 160rpx;
							height: 70rpx;
							background-color: #15B371;
							text-align: center;
							line-height: 70rpx;
							color: #ffffff;
							border-radius: 35rpx;
							font-size: 28rpx;
							box-shadow: 5rpx 5rpx 5rpx 0px rgba(0, 0, 0, 0.2);
						}
					}
					
					.hcb-more {
					}
				}

			}
		}

		.source-info-wrap {
			background: #ffffff;
			width: 70vw;
			border-radius: 20rpx;
			padding: 20rpx;
			position: relative;
			
			.source-info-code {
				margin-top: 40rpx;
			}
			
			.source-info-name {
				margin-top: 20rpx;
			}
			
			.source-info-fee {
				margin-top: 20rpx;
				margin-bottom: 60rpx;
				
				.source-fee {
					color: #d50003;
				}
			}
			
			.source-info-btns {
				text-align: center;
				
				> button {
					margin-left: 20rpx;
				}
			}
			
			.tcr-model-close {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

	}
</style>